/**
 * AI 助手插件主入口
 */

import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
import FloatingButton from './components/FloatingButton';
import ChatDialog from './components/ChatDialog';
import { Message } from './types';
import { DesignSchema } from './types';
import { CSS_ANIMATION } from './styles';
import { useResize } from './hooks/useResize';
import { designService } from './services/designService';

export interface AIAssistantPluginOptions {
  position?: 'bottom-right' | 'bottom-left';
  // AI 配置（可选）
  ai?: {
    enabled?: boolean; // 是否启用 AI API
    endpoint?: string; // AI API 端点
  };
}

interface AIAssistantProps {
  ctx: IPublicModelPluginContext;
}

/**
 * AI 助手主组件
 */
const AIAssistant: React.FC<AIAssistantProps> = ({ ctx }): React.ReactElement => {
  const [isOpen, setIsOpen] = useState(false);
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState<Message[]>([]);
  const dialogRef = useRef<HTMLDivElement>(null);
  const buttonRef = useRef<HTMLDivElement>(null);

  // 使用拖拽调整大小 hook
  const { size, handleMouseDown } = useResize({
    minWidth: 380,
    maxWidth: 800,
    minHeight: 500,
    maxHeight: window.innerHeight - 120,
    defaultWidth: 380,
    defaultHeight: 720,
    elementRef: dialogRef,
  });

  // 处理点击外部关闭对话框
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        isOpen &&
        dialogRef.current &&
        buttonRef.current &&
        !dialogRef.current.contains(event.target as Node) &&
        !buttonRef.current.contains(event.target as Node)
      ) {
        setIsOpen(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isOpen]);

  // 切换对话框显示/隐藏
  const handleToggle = () => {
    setIsOpen(!isOpen);
    console.log('=== AI助手对话框', !isOpen ? '打开' : '关闭', '===');
  };

  // 发送消息
  const handleSend = () => {
    if (message.trim()) {
      console.log('发送消息:', message);

      // 添加用户消息
      const userMessage: Message = {
        id: Date.now().toString(),
        type: 'user',
        content: message,
        timestamp: new Date(),
      };
      setMessages((prev) => [...prev, userMessage]);

      // 清空输入框
      const userInput = message;
      setMessage('');

      // 调用设计服务获取方案
      // 如果用户输入包含"设计"或"生成"等关键词，返回设计方案
      const shouldReturnDesigns = /设计|生成|创建|页面|布局/.test(userInput);

      if (shouldReturnDesigns) {
        // 使用设计服务获取方案（支持动态数据）
        setTimeout(async () => {
          try {
            const response = await designService.getDesigns({
              prompt: userInput,
              count: 4, // 可以根据需要调整数量
            });

            if (response.success && response.designs.length > 0) {
              const designMessage: Message = {
                id: (Date.now() + 1).toString(),
                type: 'design',
                content: `根据您的需求，我为您生成了 ${response.designs.length} 个设计方案，请选择您喜欢的：`,
                timestamp: new Date(),
                designs: response.designs,
              };
              setMessages((prev) => [...prev, designMessage]);
            } else {
              // 如果获取失败，返回错误消息
              const errorMessage: Message = {
                id: (Date.now() + 1).toString(),
                type: 'assistant',
                content: `抱歉，获取设计方案失败：${response.error || '未知错误'}`,
                timestamp: new Date(),
              };
              setMessages((prev) => [...prev, errorMessage]);
            }
          } catch (error) {
            console.error('获取设计方案失败:', error);
            const errorMessage: Message = {
              id: (Date.now() + 1).toString(),
              type: 'assistant',
              content: `抱歉，获取设计方案时出现错误。`,
              timestamp: new Date(),
            };
            setMessages((prev) => [...prev, errorMessage]);
          }
        }, 1000);
      } else {
        // 普通文本回复
        setTimeout(() => {
          const aiMessage: Message = {
            id: (Date.now() + 1).toString(),
            type: 'assistant',
            content: `收到您的消息："${userInput}"。\n\n您可以尝试输入包含"设计"、"生成"、"创建"等关键词来获取设计方案。`,
            timestamp: new Date(),
          };
          setMessages((prev) => [...prev, aiMessage]);
        }, 500);
      }
    }
  };

  // 选择设计方案
  const handleSelectDesign = (design: DesignSchema) => {
    console.log('用户选择了设计方案:', design);
    console.log('设计方案 Schema:', design.schema);

    try {
      // 获取当前项目
      const { project } = ctx;
      const currentDocument = project.currentDocument;

      if (!currentDocument) {
        throw new Error('没有找到当前文档');
      }

      // 获取当前选中的节点
      const selection = currentDocument.selection;
      const selectedNode = selection.getTopNodes()?.[0];

      let applyMode = 'replace'; // 默认替换整个页面
      let targetNode = null;

      // 检查是否有选中的节点
      if (selectedNode) {
        console.log('🎯 检测到选中的节点:', {
          id: selectedNode.id,
          componentName: selectedNode.componentName,
          isContainer: selectedNode.isContainer,
        });

        // 判断选中的节点是否是容器（可以包含子节点）
        if (selectedNode.isContainer) {
          applyMode = 'append'; // 添加到容器
          targetNode = selectedNode;
          console.log('✅ 选中节点是容器，将设计方案添加到容器中');
        } else {
          console.log('⚠️ 选中节点不是容器，将替换整个页面');
        }
      } else {
        console.log('ℹ️ 没有选中节点，将替换整个页面');
      }

      if (applyMode === 'append' && targetNode) {
        // 模式1: 添加到选中的容器
        console.log('开始将设计方案添加到选中容器...');

        // 获取设计方案的子节点（如果设计方案本身是 Page，取其 children）
        let nodesToAdd = [];
        if (design.schema.componentName === 'Page' && design.schema.children) {
          // 设计方案是完整页面，取其子节点
          nodesToAdd = design.schema.children;
        } else {
          // 设计方案本身就是组件，直接添加
          nodesToAdd = [design.schema];
        }

        console.log('准备添加的节点:', nodesToAdd);

        // 使用 importSchema 方法添加节点到容器
        if (targetNode.children) {
          targetNode.children.importSchema(nodesToAdd);
          console.log('✅ 成功调用 importSchema');
        } else {
          throw new Error('选中的容器没有 children 属性');
        }

        // 添加成功消息
        const confirmMessage: Message = {
          id: Date.now().toString(),
          type: 'assistant',
          content: `✅ 已成功将设计方案添加到容器：${targetNode.componentName}\n\n设计内容：${design.title}\n已添加 ${nodesToAdd.length} 个组件`,
          timestamp: new Date(),
        };
        setMessages((prev) => [...prev, confirmMessage]);

        console.log('✅ 设计方案已添加到容器');
      } else {
        // 模式2: 替换整个页面 Schema
        console.log('开始应用设计方案到页面...');

        // 导入新的 schema（会替换当前页面）
        project.importSchema({
          componentsTree: [design.schema],
        } as any);

        // 添加成功消息
        const confirmMessage: Message = {
          id: Date.now().toString(),
          type: 'assistant',
          content: `✅ 已成功应用设计方案：${design.title}\n\n页面已更新，请查看画布效果！`,
          timestamp: new Date(),
        };
        setMessages((prev) => [...prev, confirmMessage]);

        console.log('✅ 设计方案应用成功');
      }
    } catch (error) {
      console.error('❌ 应用设计方案失败:', error);

      // 添加错误消息
      const errorMessage: Message = {
        id: Date.now().toString(),
        type: 'assistant',
        content: `❌ 应用设计方案失败：${error}\n\n请检查控制台查看详细错误信息。`,
        timestamp: new Date(),
      };
      setMessages((prev) => [...prev, errorMessage]);
    }
  };

  // 处理键盘按键
  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  return (
    <>
      {/* 浮动按钮 */}
      <FloatingButton isOpen={isOpen} onClick={handleToggle} buttonRef={buttonRef} />

      {/* 对话框 */}
      {isOpen && (
        <ChatDialog
          dialogRef={dialogRef}
          message={message}
          messages={messages}
          onMessageChange={setMessage}
          onSend={handleSend}
          onKeyPress={handleKeyPress}
          onSelectDesign={handleSelectDesign}
          width={size.width}
          height={size.height}
          onResizeStart={handleMouseDown}
        />
      )}

      {/* CSS 动画 */}
      <style>{CSS_ANIMATION}</style>
    </>
  );
};

/**
 * AI 助手插件
 */
const AIAssistantPlugin = (
  ctx: IPublicModelPluginContext,
  options: AIAssistantPluginOptions = {}
) => {
  return {
    async init() {
      console.log('=== AI助手插件开始初始化 ===');
      console.log('📦 插件名称: @alilc/lowcode-plugin-ai-assistant');
      console.log('🔧 插件配置:', options);

      // 配置设计服务
      if (options.ai) {
        designService.configure({
          useAI: options.ai.enabled || false,
          apiEndpoint: options.ai.endpoint || '',
        });
        console.log('🤖 AI 服务配置:', {
          enabled: options.ai.enabled,
          endpoint: options.ai.endpoint ? '已设置' : '未设置',
        });
      }

      // 创建浮动按钮容器
      const container = document.createElement('div');
      container.id = 'lowcode-ai-assistant-container';
      document.body.appendChild(container);

      // 渲染 AI 助手组件到容器，传入 ctx
      ReactDOM.render(<AIAssistant ctx={ctx} />, container);

      console.log('=== AI助手浮动按钮已添加到页面 ===');
      console.log('=== AI助手插件初始化完成 ===');
    },
    destroy() {
      // 清理：移除容器
      const container = document.getElementById('lowcode-ai-assistant-container');
      if (container) {
        ReactDOM.unmountComponentAtNode(container);
        container.remove();
        console.log('=== AI助手插件已销毁 ===');
      }
    },
  };
};

AIAssistantPlugin.pluginName = 'AIAssistantPlugin';
AIAssistantPlugin.meta = {
  dependencies: ['EditorInitPlugin'],
};

export default AIAssistantPlugin;
